<template>
	<div class="app-list-table">
		
		<!--
		公共列表组件
		入参 ： options ： 
			
		// 是否有分页
		noPage : true ,
		// 列表上部btn组
		listBtns : [{
			label : "添加主机",
			iconfont : "icon-folder-add",
			commandName : "addZJ",
		}],
		// 列表api
		listApi : {
			url : apiUrls.getClusterMasterNode,
			type : "POST",
			params :{
				clusterName : this.$route.query.clusterName || "",
			}
		},
		// 表头设置
		header : [{
			label : "IP" ,
			width : "",
			propName : "ip",
			align:"left",
		},{
			label : "类型" ,
			width : "",
			propName : "clusterType",
				html : (row)=>{
					return `<span style="color:red;">${row.clusterType}</span>`
				},
			commandName:"goDetail",
		},{
			label : "主机数" ,
			width : "",
			propName : "hostCount",
		},{
			label : "操作" ,
			width : "",
			btns : [{
				label : "删除",
				commandName : "deleteZJ",
			}],
			btnGroups : [{
				
			}]
		}]
			
		-->
		
		
		<div v-if="options.listBtns&&options.listBtns.length" class="list-over-btns">
			<el-button
				v-for="(item,index) in options.listBtns"
				:disabled="item.disabled&&item.disabled()"
				v-show="!item.show||item.show()"
				:key="index"
				@click="handleCommand(item.commandName)"
				>
				<i v-if="item.iconfont" :class="'iconfont ' + item.iconfont"></i>
				{{item.label}}
			</el-button>
		</div>
		
		<el-table 
      ref="listTable"
      :data="tableData"
      :default-sort="{prop:'sortFuckElmentUiNum'}"
      v-loading="loading">
      
      <el-table-column width="1" prop="sortFuckElmentUiNum"></el-table-column>
            
			 <el-table-column
			  v-if="options.multipleTable"
				type="selection"
				width="55">
			</el-table-column>

      <!--列表项循环 start-->
	    <el-table-column
	    	v-for="(item,index) in options.header"
	    	v-if="item.label!='操作'"
	    	:key="item.label"
	    	:prop="item.propName"
	      :label="item.label"
	      :class-name="item.class"
	      :width="item.width"
	      :align="item.align||'center'"
				:show-overflow-tooltip= 'true'
	      >
	      <template slot-scope="scope" >
		      	<span  @click="handleCommand(item.commandName,scope.row,scope.$index)"
		      		v-if="item.html"
		      		:class="item.commandName?'cursor-pointer':''"
		      		v-html="item.html(scope.row)"
		      		>
		      	</span>
		      	<span 
		      		v-else
		      @click="handleCommand(item.commandName,scope.row,scope.$index)"
		      		:class="item.commandName?'cursor-pointer':''"
		      		>
		      		{{scope.row[item.propName]||scope.row[item.propName]==0?scope.row[item.propName]:''}}
		      	</span>
	      </template>
	    </el-table-column>
	    <!--列表项循环 end-->
    
    	<!--操作 start-->
	    <el-table-column
	    	v-else
	    	prop="操作"
       	label="操作"
       	:width="item.width"
       	:align="item.align||'right'"
       	>
        <template slot-scope="scope" >
        	<template v-if="item.btns.length" >
        		<el-button
								v-for="btnItem in item.btns"
								v-if="!btnItem.show||(btnItem.show&&btnItem.show(scope.row))"
								:key="btnItem.commandName"
								type="text"
								size="mini"
								@click="handleCommand(btnItem.commandName,scope.row,scope.$index)">
							  <span v-if="Object.keys(iconConfig).indexOf(btnItem.label)>-1">
			              <i :class="'iconfont '+ iconConfig[btnItem.label]"
			                  :title="btnItem.label||''"
			                  ></i>
			          </span>
			          <span v-else>
			              {{btnItem.label}}
			          </span>
						</el-button>
        	</template>
					
			
            <!-- 按钮组 -->
			  	<el-dropdown trigger="click" size="small" v-if="item.btnGroups">
			  		<span class="el-dropdown-link">
					    <el-button :disabled="!item.btnGroups||!item.btnGroups.length||noBtnsShow(item.btnGroups,scope.row)" type="text" size="mini">
					    	<i class="iconfont icon-more" title="更多操作" ></i>
					    </el-button>
					  </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item
								v-for="btnGroupItem in item.btnGroups"
								v-if="!btnGroupItem.show||(btnGroupItem.show&&btnGroupItem.show(scope.row))"
								:command='btnGroupItem.commandName'
								:key="btnGroupItem.commandName"
								type="text"
								>
								<p @click="handleCommand(btnGroupItem.commandName,scope.row,scope.$index)">{{btnGroupItem.label}}</p>
							</el-dropdown-item>
						</el-dropdown-menu>
						
					</el-dropdown>
					
			
        </template>
	    </el-table-column>
	    <!--操作 end-->

	 	</el-table>
		
		<!--分页 start-->
		<el-pagination 
			v-if="!options.noPage"
			:disabled="!page.total"
	     class="serach-pagination"
	     background
	     layout="total, sizes, prev, pager, next, jumper"
	     :current-page="page.pageNum"
	     :page-sizes="page.pageSizes"
	     :page-size="page.pageSize"
	     :total="page.total"
	     @size-change="handleSizeChange"
	     @current-change="handleCurrentChange"
	     >
    </el-pagination>
		<!--分页 end-->
		
	</div>
</template>

<script>
import { getDataByUrl } from "@/service/components/common.js"

export default {
	name: "listTable",
	props: [
		"options"
	],
	components: {
		
	},
	data() {
		return {
			tableData: [],
			loading: false,
			
			iconConfig: {
				'详情': 'icon-detail',
				'删除': 'icon-shanchu',
				'销毁': 'icon-broken',
				'修改': 'icon-write',
				'启动': 'icon--kaishiguanbi',
				'停止': 'icon-stop',
				'初始化': 'icon-init',
				'禁用': 'icon-disabled',
				'启用': 'icon-undisabled',
				'处理': 'icon-xiufu',
				'升级': 'icon-update',
				'忽略': 'icon-saoba',
				'部署': 'icon-bushu',
				'编辑':'el-icon-edit',
				"重置密码":'icon-updateMM'
			},

			page: {
				total: 0,
//				pageSize: this.$route.query.pageSize?this.$route.query.pageSize-0:10,
//				pageNum: this.$route.query.pageNum?this.$route.query.pageNum-0:1,
				pageSize : 10,
				pageNum :1,
				pageSizes: [10, 20, 50],
			},

			params: {},
			
			noBtnsShow : (arr,row)=>{
				let hasSomeOne;
				arr.forEach(el=>{
					if(!el.show||el.show(row)){
						hasSomeOne = true ;
					}
				})
				return !hasSomeOne;
			}
		}
	},
	mounted() {
		if (this.options.listData) {
			this.tableData = this.options.listData;
		}
		
	},
	methods: {
		initPage() {
			this.page = {
				total: 0,
//				pageSize: this.$route.query.pageSize?this.$route.query.pageSize-0:10,
//				pageNum: this.$route.query.pageNum?this.$route.query.pageNum-0:1,
				pageSize : 10,
				pageNum :1,
				pageSizes: [10, 20, 50],
			}
			return this;
		},
		search(_params) {
			
			// 清除status的检测
			if (window.intelVal) {
				clearInterval(window.intelVal)
			}

			if (_params) {
				this.params = _params;
			}

			// 获取列表数据

			if (this.options && this.options.listApi) {

				this.loading = true;
				let params = {
					...this.options.listApi.params,
					...this.params,
				}
				if (!this.options.noPage) {
					params.pageSize = this.page.pageSize;
					params.pageNum = this.page.pageNum;
				}

				if (this.options.listApi.serviceFN) {
					this.getDataByFN(params)
				}
				else if (this.options.listApi.url) {
					this.getDataByUrl(params)
				}
			}

		},
		getDataByUrl(params) {
			getDataByUrl(this.options.listApi.url, params).then(ret => {
				this.serviceCallBack(ret)
			})
		},
		getDataByFN(params) {
			this.options.listApi.serviceFN(params).then((ret) => {
				this.serviceCallBack(ret)
			})
		},
		serviceCallBack(ret, isOutSideRet) {
			// 处理列表数据
			if (ret.data) {
				let arr =  ret.data.data || ret.data;
    		arr.forEach((el,index)=>{
    			el.sortFuckElmentUiNum = index;
    		})
				this.tableData = arr ;
				if (ret.data.totalNum || ret.data.totalNum == 0) {
					this.page.total = ret.data.totalNum;
				}
			}
			this.loading = false;
			if (!isOutSideRet) {
				this.$emit("command", "listLoaded", this.tableData)
			}
		},


		handleCommand(command, row, index) {
			if (command) {
				this.$emit("command", command, row, index)
			}
		},

		handleCurrentChange(pageNum) {
//			this.$router.push({
//				path : this.$route.path,
//				params : this.$route.params,
//				query : {
//					...this.$route.query,
//					pageNum : pageNum ,
//					//pageSize : pageSize ,
//				},
//			})
			this.page.pageNum = pageNum;
			this.search();
		},
		handleSizeChange(size) {
//			this.$router.push({
//				path : this.$route.path,
//				params : this.$route.params,
//				query : {
//					...this.$route.query,
//					pageNum : 1 ,
//					pageSize : size ,
//				},
//			})
			this.page.pageSize = size;
			this.page.pageNum = 1;
			this.search();
		},

	}
}
</script>

<style  lang="scss">
@import "../../../styles/variables.scss";

.app-list-table {
  margin: 30px 0;
  padding: 0 20px;
  
  .cursor-pointer {
  	color: $mainBlue;
  }

  .list-over-btns {
    margin-bottom: 10px;
    text-align: right;
  }

  .el-table__body-wrapper {
  	
    .el-table__row td {
    	&:nth-child(1){
    		overflow: hidden;
    	}
    	
      .el-button--text {
        padding: 0;
      }

      i {
        font-size: 14px;
      }

      .el-dropdown {
        margin-left: 6px;
      }
    }
  }
}
</style>